<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#ad{
				width: 300px;
				height: 200px;
				position: absolute;
				top: 0;
				left: 0;
				background: url(image/ad.jpg) no-repeat;
				border: 1px solid blue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var ad = document.getElementById("ad");
				var close = document.getElementById("close");
				//6.获得浏览器可视区域的宽高
				var docH = document.documentElement.clientHeight;
				var docW = document.documentElement.clientWidth;
				//7.减去广告的宽高
				var newH = docH - ad.offsetHeight;
				var newW = docW - ad.offsetWidth;
				//8.
				var x = 1;
				var y = 1;
				
				//2.加定时器
				setInterval(function(){
					//3.获取旧的top和left
					var oldTop = ad.offsetTop;
					var oldLeft = ad.offsetLeft;
					//4.设置一个新的值
					var newTop = oldTop + x;
					var newLeft = oldLeft + y;
					//5.赋值回去
					ad.style.top = newTop + 'px';
					ad.style.left = newLeft + 'px';
					//9.判断临界点
					//向上
					if(newTop == newH){
						x = -1;
					}
					//向左
					if(newLeft == newW){
						y = -1;
					}
					//向下
					if(newTop == 0){
						x = 1;
					}
					//向右
					if(newLeft == 0){
						y = 1;
					}
				},5)
			}
		</script>
	</head>
	<body>
		<div id='ad'>
			<img src="image/close.jpg" id="close"/>
		</div>
	</body>
</html>
